<!--项目看板---项目进度安排 -->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <span class="header">项目进度安排</span>
      </div>
      <div class="progress">
        <div class="gradient-line"></div>
        <span class="arrow"> > </span>
      </div>
      <div class="row-gap">
        <div class="content">
          <div class="time">2021年04月-06月</div>
          <div class="dolt"></div>
          <div class="text">完成苗木准备造林整地栽植</div>
        </div>
        <div class="content">
          <div class="time">2021年07月-08月</div>
          <div class="dolt"></div>
          <div class="text">完成围封埋设标示牌</div>
        </div>
        <div class="content">
          <div class="time">2021年08月-12月</div>
          <div class="dolt"></div>
          <div class="text">进行抚育管理及管护</div>
        </div>
        <div class="content">
          <div class="time">2022年04月-2024年04月</div>
          <div class="dolt"></div>
          <div class="text">进行补植补造抚育管理及管护</div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>

export default {
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.header {
  color: #11A983;
}

.box-card {
  height: 378px;
  margin-bottom: 10px;
}

.progress {
  display: flex;
  align-items: center;
  margin-top: 40px;

  .gradient-line {
    height: 2px;
    width: 100%;
    background-image: linear-gradient(to right, #ff9042, #ddeeae, #8be1c7); /* 渐变色从左到右 */
  }

  .arrow {
    color: #8be1c7;
    position: relative;
    left: -7px;
  }
}

.content {
  position: relative;
  top: -38px;

  .dolt {
    width: 7px;
    height: 7px;
    background-color: #39b091;
    border-radius: 50%;
    margin-left: 30px;
  }

  .time {
    font-size: 12px;
    color: #6f6f6f;
    margin-bottom: 10px;
  }

  .text {
    font-size: 12px;
    width: 75px;
    height: 75px;
    color: #6f6f6f;
    background: #f3faf9;
    border: 1px solid #d7f0ea;
    padding: 10px;
    text-align: center;
    margin-top: 10px;
  }
}

.row-gap {
  display: flex;
  justify-content: space-between;
}

</style>
